<template>
	<view id="addChild">
		<form> 
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input placeholder="孩子名字" :value="userName" name="input" @input="editUserName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">年龄</view>
				<input placeholder="孩子年龄" type="number" :value="age" name="input" @input="editAge"></input>
			</view>
			<view class="cu-form-group" style="justify-content: flex-start;">
				<view class="title">性别</view>
				<radio-group class="block" @change="RadioChange">
					<view class="cu-form-group" style="padding-left:0;">
						<label class="flex align-center">
							<radio class="orange" :class="gender=='男'?'checked':''" :checked="gender=='男'?true:false" value="男" style="transform:scale(0.7)"></radio>
							男
						</label>
						<label class="flex align-center">
							<radio class='orange margin-left-sm' :class="gender=='女'?'checked':''" :checked="gender=='女'?true:false" value="女" style="transform:scale(0.7)"></radio>
							女
						</label>
					</view>
				</radio-group>
			</view>
			<view class="cu-form-group">
				<view class="title">电话</view>
				<input placeholder="孩子电话" type="number" :value="tel" name="input" @input="editTel"></input>
			</view>
		</form>
		 
		<view class="padding flex flex-direction my-btn">
			<button class="cu-btn bg-black margin-tb-sm lg" :loading="loading" @click="save">保存</button>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				userName: '',
				age: '',
				gender: '男',
				tel: '',
				loading: false,
			}
		},
		onLoad() {
		 
		},
		methods: {
			RadioChange(e) {
				this.gender = e.detail.value
			},
			// 我的学生列表
			async getStudents(){
				let res = await this.$api.students()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('我的学生列表', res.data.data)
					
					this.$store.dispatch('sendStudents', res.data.data)
				}
			},
			// 新增学生
			async add(){
				this.loading = true
				
				let res = await this.$api.addStudent({student_name: this.userName, age: this.age, gender: this.gender=='男'?1:2, phone: this.tel})
				if(res.statusCode === 200 || res.statusCode === 201){
					this.loading = false
					
					uni.showToast({
						title: '添加成功',
						mask: true,
						success: () => {
							// 我的学生列表
							this.getStudents()
							
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
					
					console.log('新增学生', res.data.data)
				}
			},
			save(){
				// 表单验证
				let userNameReg = /^[\u4E00-\u9FA5]{2,4}$/
				let telReg = /^1(3|4|5|6|7|8|9)\d{9}$/
				let ageReg = /^((1[0-5])|[1-9])?\d$/	//0-199岁
				
				if(this.userName == '' || this.age == '' || this.gender == '' || this.tel == ''){
					uni.showToast({title: '还有未填的内容', icon: 'none'})
					return false
				}
				if(!userNameReg.test(this.userName)){
					uni.showToast({title: '必须是中文名,长度2-4位', icon: 'none'})
					return false
				}
				if(!ageReg.test(this.age)){
					uni.showToast({title: '年龄超出范围了', icon: 'none'})
					return false
				}
				if(!telReg.test(this.tel)){
					uni.showToast({title: '手机号码格式不正确', icon: 'none'})
					return false
				}
				this.add()
			},
			editUserName(e){
				this.userName = e.detail.value
			},
			editAge(e){
				this.age = e.detail.value
			},
			editTel(e){
				this.tel = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	#addChild{
		.my-btn{
			position: fixed;
			width: 100%;
			bottom: 10upx;
		}
	}
</style>
